<template>
    <div class="index-content">
        <div class="head-bg">
            <div class="head-div1">
                <el-button type="success" @click="dialogFormVisible = true; dialogFormVisibleText = '添加分类'">添加</el-button>
            </div>
            <div class="head-div2">
                <div class="head-div2-div1">
                    <span class="span">ID</span>
                    <el-input v-model="search.id" placeholder="请输入" style="min-width: 200px;" />
                </div>
                <div class="head-div2-div2">
                    <span class="span">状态</span>
                    <el-select v-model="search.value" placeholder="不限" style="min-width: 200px;">
                        <el-option v-for="item in search.select" :key="item.value" :label="item.label" :value="item.value"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                    <el-button style="margin-left: 20px; margin-right: 20px;" type="primary" :icon="Search"></el-button>
                </div>
            </div>
        </div>



        <div class="table-bg">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="55" />

                <el-table-column label="ID" min-width="100">
                    <template #default="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>


                <el-table-column label="名称" min-width="300">
                    <template #default="scope">
                        <span>{{ scope.row.nc }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="图片" min-width="200">
                    <template #default="scope">
                        <el-image style="width: 50px; height: 50px; " :src="scope.row.img"
                            :preview-src-list="scope.row.imgArr" :initial-index="0" preview-teleported fit="cover">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column label="排序" min-width="200">
                    <template #default="scope">
                        <span>{{ scope.row.number }}</span>
                    </template>
                </el-table-column>



                <el-table-column label="状态" min-width="200">
                    <template #default="scope">
                        <el-button size="small">{{ scope.row.name }}</el-button>
                    </template>
                </el-table-column>

                <el-table-column label="操作时间" min-width="200">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-icon>
                                <timer />
                            </el-icon>
                            <span style="margin-left: 10px">{{ scope.row.date }}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" min-width="280">
                    <template #default="scope">
                        <el-button size="small"
                            @click="dialogFormVisible = true; dialogFormVisibleText = '编辑分类'">编辑</el-button>
                        <el-button size="small" type="danger" @click="del(scope.row.name)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="demo-pagination-block">
            <el-pagination v-model:currentPage="currentPage2" v-model:page-size="pageSize2"
                :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
                layout="sizes, prev, pager, next" :total="1000" @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>



    <!--  -->
    <el-dialog v-model="dialogFormVisible" :title="dialogFormVisibleText" width="400px">
        <el-form :model="dialogFormVisibleForm">


            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="dialogFormVisibleForm.money" style="width: 214px;"></el-input>
            </el-form-item>

            <el-form-item label="图片" :label-width="formLabelWidth">
                <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="1">
                    <el-icon>
                        <plus />
                    </el-icon>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
            </el-form-item>


            <el-form-item label="排序" :label-width="formLabelWidth">
                <el-input v-model="dialogFormVisibleForm.money" style="width: 214px;"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-radio-group v-model="dialogFormVisibleForm.resource">
                    <el-radio label="显示"></el-radio>
                    <el-radio label="隐藏"></el-radio>
                </el-radio-group>
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
    <!--  -->
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { Search, Timer, Plus } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance();
const state = reactive({
    tabList: []
})
let search = ref({
    id: '',
    value: '',
    select: [
        {
            value: '不限',
            label: '不限',
            disabled: true,
        },
        {
            value: '显示',
            label: '显示',
        },
        {
            value: '隐藏',
            label: '隐藏',
        }
    ]
})


let tableData = ref([
    {
        id: 0,
        fl: 'Nike盲盒',
        tag: '新人',
        nc: '耐克AIR男子运动鞋新款板鞋DH2521',
        sm: '碎片盒子',
        img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
        imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
        number: 10000,
        date: '2022-02-11 12:01:26',
        name: '显示',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 1,
        fl: 'Nike盲盒',
        tag: '新人',
        nc: '耐克AIR男子运动鞋新款板鞋DH2521',
        sm: '碎片盒子',
        img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
        imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
        number: 10000,
        date: '2022-02-11 12:01:26',
        name: '显示',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 2,
        fl: 'Nike盲盒',
        tag: '新人',
        nc: '耐克AIR男子运动鞋新款板鞋DH2521',
        sm: '碎片盒子',
        img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
        imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
        number: 10000,
        date: '2022-02-11 12:01:26',
        name: '显示',
        address: 'No. 189, Grove St, Los Angeles',
    },


    {
        id: 3,
        fl: 'Nike盲盒',
        tag: '新人',
        nc: '耐克AIR男子运动鞋新款板鞋DH2521',
        sm: '碎片盒子',
        img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
        imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
        number: 10000,
        date: '2022-02-11 12:01:26',
        name: '显示',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 3,
        fl: 'Nike盲盒',
        tag: '新人',
        nc: '耐克AIR男子运动鞋新款板鞋DH2521',
        sm: '碎片盒子',
        img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
        imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
        number: 10000,
        date: '2022-02-11 12:01:26',
        name: '显示',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 3,
        fl: 'Nike盲盒',
        tag: '新人',
        nc: '耐克AIR男子运动鞋新款板鞋DH2521',
        sm: '碎片盒子',
        img: 'https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png',
        imgArr: ['https://mh.huan-ju.cn/attachment/lingchi_blind_box/6/image/20220211/c2d8b44f80b8ec148e541ca176a9fe00.png'],
        number: 10000,
        date: '2022-02-11 12:01:26',
        name: '显示',
        address: 'No. 189, Grove St, Los Angeles',
    },
])

const getData = async () => {
    let res = await proxy.$api.home.list({ page: 1, limit: 10 })
    console.log('state', state);
    console.log('res', res);
}
getData()


let dialogFormVisible = ref(false)
let dialogFormVisibleText = ref('')
let dialogFormVisibleForm = ref({})


const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (file, fileList) => {
    console.log(file, fileList)
}
const handlePictureCardPreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}


const del = () => {
    ElMessageBox.confirm(
        '确认删除该数据吗？',
        '删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            //   ElMessage({
            //     type: 'info',
            //     message: '删除失败',
            //   })
        })
}


</script>

<style lang="scss">
.index-content {
    padding: 0px 30px;
}

.head-bg {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .head-div1 {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .head-div2 {
        display: flex;
        align-items: center;

        .head-div2-div1 {
            display: flex;
            align-items: center;

            .span {
                text-align: center;
                min-width: 50px;
                margin-left: 30px;
                margin-right: 30px;
            }
        }

        .head-div2-div2 {
            display: flex;
            align-items: center;

            .span {
                text-align: center;
                min-width: 50px;
                margin-right: 30px;
                margin-left: 30px;
            }
        }
    }
}




.demo-pagination-block {
    margin: 30px 0;
}

.el-form-item__label {
    //  width: 68px;
    text-align: start;
}
</style>